﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>响应式布局</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link href="style/index.css" rel="stylesheet" />
	<link href="style/index3.css" rel="stylesheet" />
	<style>
	* { transition: all 0.33s; }
	*::-moz-selection { background: #ff9900; }
	a { font-family: 'BebasNeueRegular'; }
	a:hover { text-decoration: none; }
	body { padding: 0;  margin: 0 auto; letter-spacing: 1px; max-width: 1350px; }
	ul, li, h1, p { margin: 0; padding: 0; }
	#test {
		position: fixed;
		right: 10px;
		top: 10px;
	}
	</style>
</head>
<body>
	<!-- 头部加导航条 -->
	<header>
		<a href="/">
			DESIGNED BY <span>LVJIAXUAN<span>
		</a>
		<nav>
			<ul id="navul">
				<span>查看菜单</span>
				<li class=""><a href="#">Home</a></li>
				<li class=""><a href="#">web1</a></li>
				<li class=""><a href="#">web22</a></li>
				<li class=""><a href="#">web333</a></li>
				<li class=""><a href="#">web4444</a></li>
				<li class=""><a href="#">haha</a></li>
			</ul>
		</nav>
	</header>

	<!-- 主题内容 -->
	<div id="content">
	</div>
	
	<!-- 侧边栏 -->
	<aside>
		<section>
			<h1>部分1</h1>
			<a href="#">
				<img src="images/pic.png" />
				<button>more info</button>
			</a>
			<a href="#">
				<img src="images/pic.png" />
				<button>more info</button>
			</a>
		</section>
		<section>
			<h1>部分2</h1>
			<a href="#">
				<img src="images/pic.png" />
				<button>more info</button>
			</a>
			<a href="#">
				<img src="images/pic.png" />
				<button>more info</button>
			</a>			
		</section>
	</aside>

	<!-- 底部 -->
	<footer>
		<p>texttexttexttexttexttexttexttexttext,<span><a href="/">text</a></span>textetsxt</p>
	</footer>

	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/getStyle.js"></script>
	<script src="js/myjs.js"></script>
</body>
</html>